<template>
    <el-container class="main-container">
        <!-- 头部区域 -->
        <el-header>
            <!-- 左侧的 logo -->
            <img src="../../assets/images/logo.png" alt="" />
            <!-- 右侧的菜单 -->
            <el-menu class="el-menu-top" mode="horizontal" background-color="#23262E" text-color="#fff"
                active-text-color="#409EFF">
                <el-submenu index="1">
                    <!-- 顶部的用户头像 -->
                    <template slot="title">
                        <!-- 头像 -->
                        <img :src="userInfo.user_pic" alt="" class="avatar" v-if="userInfo.user_pic" />
                        <img src="../../assets/logo.png" alt="" class="avatar" v-else />
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="1-1"><i class="el-icon-s-operation"></i>基本资料</el-menu-item>
                    <el-menu-item index="1-2"><i class="el-icon-camera"></i>更换头像</el-menu-item>
                    <el-menu-item index="1-3"><i class="el-icon-key"></i>重置密码</el-menu-item>
                </el-submenu>
                <el-menu-item index="2"><i class="el-icon-switch-button"></i>退出</el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <!-- 侧边栏区域 -->
            <el-aside width="200px">
                <!-- 左侧边栏区域 -->
                <!-- 左侧边栏的用户信息 -->
                <el-aside width="200px">
                    <div class="user-box">
                        <img :src="userInfo.user_pic" alt="" v-if="userInfo.user_pic" />
                        <img src="../../assets/logo.png" alt="" v-else />
                        <span>欢迎 {{ userInfo.nickname || userInfo.username }}</span>
                    </div>
                    <el-menu router default-active="/home" class="el-menu-vertical-demo" background-color="#23262E"
                        text-color="#fff" active-text-color="#409EFF" unique-opened>
                        <!-- 不包含子菜单的“一级菜单” -->
                        <template v-for="item in menuList">
                            <el-menu-item v-if="!item.children" :key="item.indexPath" :index="item.indexPath"><i
                                    class="item.icon"></i>
                                <span slot="title">{{ item.title }}</span>
                            </el-menu-item>
                            <!-- 包含子菜单的“一级菜单” -->
                            <el-submenu v-else :index="item.indexPath" :key="item.indexPath + 1">
                                <template slot="title">
                                    <i class="el-icon-s-tools"></i>
                                    <span>{{ item.title }}</span>
                                </template>
                                <el-menu-item v-for="subItem in item.children" :index="subItem.indexPath"
                                    :key="subItem.indexPath"><i :class="subItem.icon"></i>{{ subItem.title }}
                                </el-menu-item>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>
            </el-aside>
            <el-container>
                <!-- 页面主体区域 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
                <!-- 底部 footer 区域 -->
                <el-footer>© www.itheima.com - 黑马程序员</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import { mapState } from 'vuex'
export default {
    // 开启命名空间
    namespaced: true,
    name: 'Main',
    data() {
        return {
            menuList: []
        }
    },
    computed: {
        ...mapState(['userInfo', 'token'])
    },
    methods: {
        // 退出登录
        loginOut() {
            // 询问用户是否退出登录
            this.$confirm('您确定退出登录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 执行退出登录的操作
                //1.清空 token
                this.$store.commit('updateToken', '')
                // 2.跳转到登录页面
                this.$router.push('/login')
            }).catch(err => err)
        },
        // 初始化左侧菜单的数据
        async initMenus() {
            const { data: res } = await this.$http.get('/my/menus', {
                headers: {
                    Authorization: this.$store.state.token
                }
            })
            if (res.code === 0) {
                this.menuList = res.data
            }
            // console.log(res.data);
            // console.log(this.menuList);

        }
    },
    created() {
        if (this.token) {
            // 如果 token 有值,就请求数据
            this.$store.dispatch('initUserInfo')
            this.initMenus()
        } else {
            this.$router.push('/login')
        }
    }
}
</script>

<style lang="less" scoped>
.main-container {
    height: 100%;

    .el-header,
    .el-aside {
        background-color: #23262e;
    }

    .el-header {
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

    .el-main {
        overflow-y: scroll;
        height: 0;
        background-color: #F2F2F2;
    }

    .el-footer {
        background-color: #eee;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.avatar {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background-color: #fff;
    margin-right: 10px;
    object-fit: cover;
}

// 左侧边栏用户信息区域
.user-box {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    user-select: none;

    img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #fff;
        margin-right: 15px;
        object-fit: cover;
    }

    span {
        color: white;
        font-size: 12px;
    }
}

// 侧边栏菜单的样式
.el-aside {

    .el-submenu,
    .el-menu-item {
        width: 200px;
        user-select: none;
    }
}
</style>
